<template>
  <div ref="cc" style="width: 100%; height: 500px; margin: 0 auto"></div>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import * as charts from "echarts";
let cc = ref();
onMounted(() => {
  axios.get("/api/reportForms/userRegister").then((res) => {;
    if (res.data.code == 200) {
      res.data.data.list.forEach((element) => {
        thisMoth.push(element.sum);
        thisday.push(element.day);
      });
    }
    // thisMAX = res.data.data.max;
    // thisMin = res.data.data.min;
    cs.setOption(opt);
  });
  axios.get("/api/reportForms/getUserRegisterLastMonth").then((res) => {
    if (res.data.code == 200) {
      res.data.data.list.forEach((element) => {
        lodMoth.push(element.sum);
        lodday.push(element.day);
      });
      // lodMax = res.data.data.max;
      // lodMin = res.data.data.min;
      cs.setOption(opt);
    }
  });

  let thisMoth = [];
  let lodMoth = [];
  let thisday = [];
  let lodday = [];
  // let thisMAX = "";
  // let thisMin = "";
  // let lodMax = "";
  // let lodMin = "";
  let cs = charts.init(cc.value);
  let opt = {
    title: {
      text: "用户注册月报表",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["上月份", "本月"],
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        saveAsImage: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        // prettier-ignore
        data:thisday.length > lodMoth.length? thisday:lodday,
      },
    ],
    yAxis: [
      {
        type: "value",
        data:lodday
      },
    ],
    series: [
      {
        name: "上月份",
        type: "bar",
        data: lodMoth,
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
      },
      {
        name: "本月",
        type: "bar",
        data: thisMoth,
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
      },
    ],
  };
  cs.setOption(opt);
});
</script>

<style >
</style>
